<template>
  <div class="tuanbox">
    <div class="couter">
      <div class="left">
        <el-col :span="24">
          <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
            default-openeds="1">
            <el-sub-menu index="1">
              <template #title>
                <img src="@/assets/queen.png" alt="" class="mmm">
                <span style="color: red;">党务公开栏 </span>
              </template>
              <div class="itemmm" v-for="(item, index) in lbList " :key="index" @click="active(item.id)"
                :class="acti == item.id ? 'activeitem' : ''">
                {{ item.name }}
              </div>
            </el-sub-menu>
          </el-menu>
        </el-col>
      </div>
      <div class="right">
        <div class="cen">
          <dl class="left_rght" v-for="(item, index) in tabhuan" :key="index" @click="detail(item)">
            <dt>
              <img :src="item.image" alt="">
            </dt>
            <dd>
              <h3>{{ item.title }}</h3>
              <p>
                {{ item.intro }}
              </p>
              <div>{{ item.create_time }}</div>
            </dd>
          </dl>
        </div>
        <div class="con_bom" v-if="!kong">
          <div class="cc">共{{ total }}条</div>
          <el-pagination v-model:page-size="pageSize" background layout="prev, pager, next" :total="total"
            @next-click="nextclick" @prev-click="prevclick" @change="change1" />
        </div>
        <div class="rq" v-show="kong">
          <img src="@/image/容器.svg" alt="" />
          <div>暂无信息</div>
        </div>
      </div>
    </div>
    <!-- <div class="con_bom" v-if="!kong">
      <div class="cc">共{{ total }}条</div>
      <el-pagination v-model:page-size="pageSize" background layout="prev, pager, next" :total="total"
        @next-click="nextclick" @prev-click="prevclick" @change="change1" />
    </div>
    <div class="rq" v-show="kong">
      <img src="@/image/容器.svg" alt="" />
      <div>暂无信息</div>
    </div> -->
  </div>
</template>

<script lang="ts" setup>
import { release_cate, cate } from '@/api/team'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting
} from '@element-plus/icons-vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
let Router = useRouter()
let lbList = ref()
let data: any = ref({
  page: 1,
  page_size: 6,
  cid: 1
})
const lll = () => {
  release_cate().then(res => {
    lbList.value = res.data.data
    console.log(res.data.data, 'lb')
  })
}
lll()
const release = async () => {

  await cate(data.value).then(res => {
    console.log(res.data.data.data, 'cate')
    tabhuan.value = res.data.data.data
    total.value = res.data.data.total
    tabhuan.value.forEach((item: any) => {
      item.content = item.content.split('<span></span>')
    })
    console.log(tabhuan.value, 'sssssssssssssssssssssssssssssssssssssssssssssssssss')

  })
  if (tabhuan.value == !{}) {
    kong.value = true
  } else {
    kong.value = false
  }
}
release()
let tabhuan = ref()
let kong = ref(true)

let acti = ref(1)
const active = async (item: any) => {
  acti.value = item
  data.value.cid = item
  await cate(data.value).then(res => {
    console.log(res.data.data.data, 'cate')
    tabhuan.value = res.data.data.data
    total.value = res.data.data.total
  })
  if (tabhuan.value == !{}) {
    kong.value = true
  } else {
    kong.value = false
  }
}
const detail = (item: any) => {
  console.log(item.id, 'sxss')
  // let data = item.id
  // Router.push({ path: '/home/publicbar/publicchild/process', query: { data } })
  const url = `/pc/home/publicbar/publicchild/process?data=${encodeURIComponent(item.id)}`;
  window.open(url, '_blank');
}
const total = ref(0)
const pageSize = ref(6)
const nextclick = async () => {
  data.value.page++
  release()
}
const prevclick = async () => {
  data.value.page--
  release()
}
const change1 = async (e: any) => {
  data.value.page = e
  release()
}
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style lang="scss" scoped>
.con_bom {
  position: absolute;
  bottom: 50px;
  left: 50%;
  display: flex;
  transform: translateX(-50%);

  .cc {
    width: 100px;
    margin-top: 8px;
    text-align: center;
  }
}

.kong {
  width: 100%;
  height: 100%;
}

.el-menu-vertical-demo {
  span {
    color: red;
  }
}

// .tuanbox {
//     width: 100%;
//     background: #dcdadafb;
// }

.couter {
  width: 100%;
  display: flex;
  // height: 100vh;

  .left {
    width: 232px;
    // height: 100%;
    background: #fff;
    margin-left: 20px;
    margin-top: 15px;
  }

  .right {
    width: 78%;
    background: #fff;
    margin-left: 20px;
    margin-top: 15px;
    height: 1200px;
    position: relative;

  }
}

.left_rght {
  height: 170px;
  overflow: hidden;
  border-bottom: 2px #e5e5e5 solid;
  margin-top: 5px;
  cursor: pointer;

  dt {
    img {
      width: 160px;
      height: 130px;
      margin: 10px;
    }

    float: left;
  }

  dd {
    h3 {
      margin: 10px;
    }

    div {
      margin: 10px 15px;
    }

    p {
      margin: 10px;
      height: 50px;
      line-height: 25px;
      color: #999999;
      display: -webkit-box;
      /* 将元素视为块级盒子 */
      -webkit-line-clamp: 2;
      /* 控制显示的行数 */
      -webkit-box-orient: vertical;
      /* 设置文本排列方向为垂直 */
      overflow: hidden;
      /* 超出部分隐藏 */
      text-overflow: ellipsis;
      /* 超出部分用省略号表示 */
    }
  }
}

// @media (min-width: 2160px) {
//     .tuanbox {
//         width: 100%;
//         margin: 0 auto;
//         // background-color: #f0f0f0;
//     }
// }

// @media (max-width: 2159px) {
.tuanbox {
  width: 1080px;
  margin: 0 auto;
  // background-color: #f0f0f0;
}

// }

// .cen {
//   height: 88vh;
//   // background: olive;
//   overflow: auto;
// }

.rq {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  // margin-top: 100px;
  width: 100%;
  height: 100%;
  background: #fff;

  img {
    width: 228px;
    height: 226px;
  }
}

.mmm {
  width: 18px;
  height: 18px;
  margin-right: 3px;
}

.itemmm {
  padding: 10px 0px 10px 40px;
  cursor: pointer;
}

.activeitem {
  background: #faa7a74b;
  color: #e02020;
}
</style>
